<template>
  <!-- 右侧组件 -->
  <el-row style="min-width: 300px;">
    <el-col :span="24">
      <div class="toolbar">
    <div class="tabs">
      <div 
        class="tab" 
        :class="{ 'active': tab.value === toolbarState }"
        v-for="tab in currentTabs" 
        :key="tab.value"
        @click="setToolbarState(tab.value)"
      >{{tab.label}}</div>
  
    
    </div>
    <div class="content">
      <component :is="currentPanelComponent"></component>
    </div>
  </div>
    </el-col>
  </el-row>

</template>

<script lang="ts" setup>
import { computed, watch,ref
  
 } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { ToolbarStates } from '@/types/toolbar'

import ElementStylePanel from './ElementStylePanel/index.vue'
import ElementPositionPanel from './ElementPositionPanel.vue'
import ElementAnimationPanel from './ElementAnimationPanel.vue'
import SlideDesignPanel from './SlideDesignPanel.vue'
import SlideAnimationPanel from './SlideAnimationPanel.vue'
import MultiPositionPanel from './MultiPositionPanel.vue'
import SymbolPanelde from './SymbolPanelssd.vue'
import MultiWeatherPanel from './ElementStylePanel/Weather.vue'
import MultiTimePanel from './ElementStylePanel/TimeStylePanel.vue'
interface ElementTabs {
  label: string
  value: ToolbarStates
}
const mainStore = useMainStore()
const { activeElementIdList, handleElement, toolbarState } = storeToRefs(mainStore)

const elementTabs = computed<ElementTabs[]>(() => {
  if (handleElement.value?.type === 'text') {
    return [
      { label:  '组件/文字', value: ToolbarStates.EL_STYLE },
      { label: '场景',value: ToolbarStates.SLIDE_DESIGN},
      { label: '节目', value: ToolbarStates.EL_POSITION },
    ]
  }
  return [
    { label: '组件', value: ToolbarStates.EL_STYLE },
    { label: '场景', value: ToolbarStates.SLIDE_DESIGN },
    { label: '节目', value: ToolbarStates.EL_ANIMATION },
  ]
})
const slideTabs = [
  { label: '组件/天气', value: ToolbarStates.SYMBOL },
  { label: '场景', value: ToolbarStates.SLIDE_DESIGN },
  { label: '节目', value: ToolbarStates.EL_ANIMATION },
]
const slideTabsds = [
  { label: '组件/时间', value: ToolbarStates.SLIDE_ANIMATION },
  { label: '场景', value: ToolbarStates.SLIDE_DESIGN },
  { label: '节目', value: ToolbarStates.EL_ANIMATION },
]
const slideTabsd = [
  { label: '组件', value: ToolbarStates.MULTI },
  { label: '场景', value: ToolbarStates.SLIDE_DESIGN },
  { label: '节目', value: ToolbarStates.EL_ANIMATION },
]
const multiSelectTabs = [
  { label: '样式', value: ToolbarStates.EL_STYLE },
  { label: '场景', value: ToolbarStates.MULTI_POSITION },
]

const setToolbarState = (value: ToolbarStates) => {
  mainStore.setToolbarState(value)
}

const currentTabs = computed(() => {
  
  if (!activeElementIdList.value.length) return slideTabsd
  if(handleElement.value?.type === 'weather') return slideTabs
  if(handleElement.value?.type === 'time') return slideTabsds
  else if (activeElementIdList.value.length > 1) return multiSelectTabs
  return elementTabs.value
})


watch(currentTabs, () => {
  const currentTabsValue: ToolbarStates[] = currentTabs.value.map(tab => tab.value)
  if (!currentTabsValue.includes(toolbarState.value)) {
    mainStore.setToolbarState(currentTabsValue[0])
  }
})

const currentPanelComponent = computed(() => {
  const panelMap = {
    [ToolbarStates.EL_STYLE]: ElementStylePanel,
    [ToolbarStates.EL_POSITION]: ElementPositionPanel,
    [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
    [ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel,
    [ToolbarStates.SLIDE_ANIMATION]: MultiTimePanel,
    [ToolbarStates.MULTI_POSITION]: MultiPositionPanel,
    [ToolbarStates.SYMBOL]: MultiWeatherPanel,
    [ToolbarStates.MULTI]: SymbolPanelde,
    [ToolbarStates.MULTI_POSI]: SymbolPanelde,
  }
  return panelMap[toolbarState.value] || null
})
</script>

<style lang="scss" scoped>
.toolbar {
  border-left: solid 1px $borderColor;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.tabs {
  height: 40px;
  font-size: 12px;
  flex-shrink: 0;
  display: flex;
  user-select: none;
}
.tab {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  &.active {
    // background-color: #850f0f;
    color:#0daeff;
    border-bottom-color: #571de0;
    border-bottom:2px solid;
    width:100px;
    margin: 0 10px;
  }

  & + .tab {
    // border-left: 1px solid $borderColor;
  }
}
.content {
  padding: 12px;
  font-size: 13px;
  @include overflow-overlay();
}
</style>